<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="/favicon.ico"/>
    <title><?=htmlspecialchars($name)?></title>
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
    <link href="https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.snow.css" rel="stylesheet" />
    <style>
        [x-cloak] { display: none !important; }
    </style>
</head>
<body>
    <main class="container" x-data="{
            content: [
                {type: 'h1',value: '<?=htmlspecialchars($name)?>'}
            ],
            editIndex: null
        }">
        <div class='' contenteditable="true">
            <h1 x-data="{ name: '<?=htmlspecialchars($name)?>' }">
                Hello <span x-text="name"></span>
            </h1>
        </div>
        <div x-data="{quill:null, options:{
            theme: 'bubble',
            placeholder: '写点什么...',
        }}" x-init="this.quill = new Quill($el, this.options);"></div>
        
        
        
    </main>
    <script src="https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.js"></script>
</body>
</html>
